<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="description" content="Zhui是一款带有中国风的React组件库, A Chinese style component library powered by React">
  <meta name="keywords" content="Zhui,React.js,Component,JavaScript,npm,China,组件库,中国风,">
  <link rel="stylesheet" href="./style/index.css">
  <link rel="stylesheet" href="./style/button.css">
  <link rel="stylesheet" href='./style/loading.css'>
  <link rel="icon" href="./logo.ico" type="image/x-icon"/>
  <title>Zhui - 一款带有中国风的React组件库</title>
</head>

<body>
  <div class="zhui-loading-container" id='loading'>
    <div class="zhui-loading-wrapper">
      <div class="zhui-loading zhui-loading-global"></div>
    </div>
  </div>
  <div class="center-wrapper">
    <div class="title">
      <div class="title-name">ZHUI</div>
      <div class="title-sub">一款中国风的组件库</div>
      <div class="btn-group">
        <a href="https://addonedn.github.io/Zhui/"
          class="zhui-btn zhui-btn-danger zhui-btn-round zhui-btn-large" title="zhui文档" target="_blank">
          <span>组件文档</span>
        </a>
        <a href="https://github.com/zhui-team/zhui" target="_blank"
          class="zhui-btn zhui-btn-danger-outline zhui-btn-round zhui-btn-large" title="zhui项目地址">
          <span>项目地址</span>
        </a>
      </div>
    </div>
    <div class="section-scroll" id='app' style="display: none">
      <section class="section-one"><div class="section-inner"></div></section>
      <section class="section-two"><div class="section-inner"></div></section>
      <section class="section-three"><div class="section-inner"></div></section>
    </div>
  </div>
</body>
  <script>
    let img = new Image();
    img.src = 'https://s2.ax1x.com/2019/06/17/Vb977V.jpg';
    img.onload = () => {
      document.getElementById('loading').style.display = 'none';
      document.getElementById('app').style.display = 'block';
    }
  </script>
</html>